@layout("/common/_container.html"){
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="point_range" style="height: 400px">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="pie1" style="height: 200px">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="pie2" style="height: 200px">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <div class="echarts" id="pie3" style="height: 200px">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/pie',
            'echarts/chart/map'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('point_range'));

            var cityMap = {
                "广元市": "510800"

            };


            var curIndx = 0;
            var mapType = [];
            var mapGeoData = require('echarts/util/mapData/params');
            console.log(mapGeoData)
            for (var city in cityMap) {
                mapType.push(city);
                // 自定义扩展图表类型
                mapGeoData.params[city] = {
                    getGeoJson: (function (c) {
                        var geoJsonName = cityMap[c];
                        return function (callback) {
                            $.getJSON('/static/json/' + geoJsonName + '.json', callback);
                        }
                    })(city)
                }
            }

            var ecConfig = require('echarts/config');
            var zrEvent = require('zrender/tool/event');
            document.getElementById('point_range').onmousewheel = function (e){
                var event = e || window.event;
                curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
                if (curIndx < 0) {
                    curIndx = mapType.length - 1;
                }
                var mt = mapType[curIndx % mapType.length];
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);
                zrEvent.stop(event);
            };
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                curIndx++;
                var mt = mapType[curIndx % mapType.length];
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);
            });
            option = {
                title: {
                    text : '广元市三区四县地图',
                    subtext : '旺苍县 （滚轮或点击切换）'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}<br/>谁有供电所零序目录最新版？<br/>...'
                },
                series : [
                    {
                        name: '广元市三区四县地图',
                        type: 'map',
                        mapType: '广元市',
                        selectedMode : 'single',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[]
                    }
                ]
            };

            // 为echarts对象加载数据
            myChart.setOption(option);




            var pie1 = ec.init(document.getElementById('pie1'));
            option1 = {
                title : {
                    text: '年龄段分布',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: false},
                        dataView : {show: false, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: false},
                        saveAsImage : {show: false}
                    }
                },
                calculable : false,
                series : [
                    {
                        name:'旺苍县',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'35岁以下'},
                            {value:310, name:'36-45岁'},
                            {value:234, name:'45岁以上'}
                        ]
                    }
                ]
            };

            pie1.setOption(option1);


            var pie2 = ec.init(document.getElementById('pie2'));
            option2 = {
                title : {
                    text: '学历构成分布',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: false},
                        dataView : {show: false, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: false},
                        saveAsImage : {show: false}
                    }
                },
                calculable : false,
                series : [
                    {
                        name:'旺苍县',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:23, name:'专科'},
                            {value:89, name:'本科'},
                            {value:138, name:'研究生'}
                        ]
                    }
                ]
            };

            pie2.setOption(option2);


            var pie3 = ec.init(document.getElementById('pie3'));
            option3 = {
                title : {
                    text: '党员/团员分布',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: false},
                        dataView : {show: false, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: false},
                        saveAsImage : {show: false}
                    }
                },
                calculable : false,
                series : [
                    {
                        name:'旺苍县',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:166, name:'党员'},
                            {value:45, name:'团员'}
                        ]
                    }
                ]
            };

            pie3.setOption(option3);
        }
    );
</script>
@}